<template>
  <div>
    <common-head child-name="订单管理" father-name="商城管理"/>
    <template>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="待发货" name="first">
          <wait-sending-orders v-if="isFirst"/>
        </el-tab-pane>
        <el-tab-pane label="待付款" name="second">
          <wait-pay-orders v-if="isSecond"/>
        </el-tab-pane>
        <el-tab-pane label="已发货" name="third">
          <sent-orders v-if="isThird"/>
        </el-tab-pane>
        <el-tab-pane label="已签收" name="seventh">
          <signed-orders v-if="isSeventh"/>
        </el-tab-pane>
        <el-tab-pane label="已完成" name="forth">
          <complete-orders v-if="isForth"/>
        </el-tab-pane>
        <el-tab-pane label="已关闭" name="fifth">
          <close-orders v-if="isFifth" />
        </el-tab-pane>
        <el-tab-pane label="全部" name="sixth">
          <all-orders v-if="isSixth"/>
        </el-tab-pane>

      </el-tabs>
    </template>
  </div>
</template>

<script>
  import AllOrders from "./component/AllOrders";
  import WaitSendingOrders from "./component/WaitSendingOrders";
  import WaitPayOrders from "./component/WaitPayOrders";
  import SentOrders from "./component/SentOrders";
  import SignedOrders from "./component/SignedOrders";
  import CloseOrders from "./component/CloseOrders";
  import CompleteOrders from "./component/CompletedOrders";
  import commonHead from "../system/common/commonHead";

  export default {
    data() {
      return {
        activeName: 'first',
        isFirst: true,
        isSecond: false,
        isThird: false,
        isForth: false,
        isFifth: false,
        isSixth: false,
        isSeventh:false
      };
    },
    name: "AfterOrderManaga",
    components: {
      CompleteOrders,
      AllOrders,
      WaitSendingOrders,
      WaitPayOrders,
      SignedOrders,
      SentOrders,
      CloseOrders,
      commonHead
    },
    methods: {
      handleClick(tab) {
        if (tab.name === 'first') {
          this.isFirst = true;
          this.isSecond = false;
          this.isThird = false;
          this.isForth = false;
          this.isFifth = false;
          this.isSixth = false;
          this.isSeventh=false;
        } else if (tab.name === 'second') {
          this.isFirst = false;
          this.isSecond = true;
          this.isThird = false;
          this.isForth = false;
          this.isFifth = false;
          this.isSixth = false;
          this.isSeventh=false;
        } else if (tab.name === 'third') {
          this.isFirst = false;
          this.isSecond = false;
          this.isThird = true;
          this.isForth = false;
          this.isFifth = false;
          this.isSixth = false;
          this.isSeventh=false;
        } else if (tab.name === 'forth') {
          this.isFirst = false;
          this.isSecond = false;
          this.isThird = false;
          this.isForth = true;
          this.isFifth = false;
          this.isSixth = false;
          this.isSeventh=false;
        } else if (tab.name === 'fifth') {
          this.isFirst = false;
          this.isSecond = false;
          this.isThird = false;
          this.isForth = false;
          this.isFifth = true;
          this.isSixth = false;
          this.isSeventh=false;
        } else if (tab.name === 'sixth') {
          this.isFirst = false;
          this.isSecond = false;
          this.isThird = false;
          this.isForth = false;
          this.isFifth = false;
          this.isSixth = true;
          this.isSeventh=false;
        }else if (tab.name === 'seventh') {
          this.isFirst = false;
          this.isSecond = false;
          this.isThird = false;
          this.isForth = false;
          this.isFifth = false;
          this.isSixth = false;
          this.isSeventh = true;
        }
      }
    }
  }
</script>

<style scoped>

</style>
